<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		.button {
			--primary: #275EFE;
			--primary-dark: #2055EE;
			--primary-darkest: #133FC0;
			--text: #FFFFFF;
			--text-opacity: 1;
			--success: #2B3044;
			--success-scale: .2;
			--success-opacity: 0;
			--border-radius: 7;
			--overflow: hidden;
			--rotate: 0;
			--plane-x: 0;
			--plane-y: 0;
			--plane-opacity: 1;
			--left-wing-background: var(--primary);
			--left-wing-first-x: 0;
			--left-wing-first-y: 0;
			--left-wing-second-x: 50;
			--left-wing-second-y: 0;
			--left-wing-third-x: 0;
			--left-wing-third-y: 100;
			--left-body-background: var(--primary);
			--left-body-first-x: 50;
			--left-body-first-y: 0;
			--left-body-second-x: 50;
			--left-body-second-y: 100;
			--left-body-third-x: 0;
			--left-body-third-y: 100;
			--right-wing-background: var(--primary);
			--right-wing-first-x: 50;
			--right-wing-first-y: 0;
			--right-wing-second-x: 100;
			--right-wing-second-y: 0;
			--right-wing-third-x: 100;
			--right-wing-third-y: 100;
			--right-body-background: var(--primary);
			--right-body-first-x: 50;
			--right-body-first-y: 0;
			--right-body-second-x: 50;
			--right-body-second-y: 100;
			--right-body-third-x: 100;
			--right-body-third-y: 100;
			display: block;
			cursor: pointer;
			position: relative;
			border: 0;
			padding: 8px 0;
			min-width: 100px;
			text-align: center;
			margin: 0;
			line-height: 24px;
			font-family: inherit;
			font-weight: 500;
			font-size: 14px;
			background: none;
			outline: none;
			color: var(--text);
			transform: rotate(calc(var(--rotate) * 1deg)) translateZ(0);
			-webkit-appearance: none;
			-webkit-tap-highlight-color: transparent;
			.left,
			.right {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				opacity: var(--plane-opacity);
				transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);
				&:before,
				&:after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					border-radius: calc(var(--border-radius) * 1px);
					transform: translate(var(--x, .4%), var(--y, 0)) translateZ(0);
					z-index: var(--z-index, 2);
					background: var(--background, var(--left-wing-background));
					clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%));
				}
			}
			.left:after {
				--x: 0;
				--z-index: 1;
				--background: var(--left-body-background);
				--first-x: var(--left-body-first-x);
				--first-y: var(--left-body-first-y);
				--second-x: var(--left-body-second-x);
				--second-y: var(--left-body-second-y);
				--third-x: var(--left-body-third-x);
				--third-y: var(--left-body-third-y);
			}
			.right:before {
				--x: -.4%;
				--z-index: 2;
				--background: var(--right-wing-background);
				--first-x: var(--right-wing-first-x);
				--first-y: var(--right-wing-first-y);
				--second-x: var(--right-wing-second-x);
				--second-y: var(--right-wing-second-y);
				--third-x: var(--right-wing-third-x);
				--third-y: var(--right-wing-third-y);
			}
			.right:after {
				--x: 0;
				--z-index: 1;
				--background: var(--right-body-background);
				--first-x: var(--right-body-first-x);
				--first-y: var(--right-body-first-y);
				--second-x: var(--right-body-second-x);
				--second-y: var(--right-body-second-y);
				--third-x: var(--right-body-third-x);
				--third-y: var(--right-body-third-y);
			}
			span {
				display: block;
				position: relative;
				z-index: 4;
				opacity: var(--text-opacity);
				&.success {
					z-index: 0;
					position: absolute;
					left: 0;
					right: 0;
					top: 8px;
					transform: rotate(calc(var(--rotate) * -1deg)) scale(var(--success-scale)) translateZ(0);
					opacity: var(--success-opacity);
					color: var(--success);
				}
			}
		}

		html {
			box-sizing: border-box;
			-webkit-font-smoothing: antialiased;
		}

		* {
			box-sizing: inherit;
			&:before,
			&:after {
				box-sizing: inherit;
			}
		}


		// Center & dribbble
		   body {
			   min-height: 100vh;
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   font-family: 'Inter', Arial;
			   background: #E1E6F9;
			   .dribbble {
				   position: fixed;
				   display: block;
				   right: 20px;
				   bottom: 20px;
				   img {
					   display: block;
					   height: 28px;
				   }
			   }
			   .twitter {
				   position: fixed;
				   display: block;
				   right: 64px;
				   bottom: 14px;
				   svg {
					   width: 32px;
					   height: 32px;
					   fill: #1da1f2;
				   }
			   }
		   }
	</style>

</head>
<body>
<button class="button">
	<span class="default">Send</span>
	<span class="success">Sent</span>
	<div class="left"></div>
	<div class="right"></div>
</button>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>
	document.querySelectorAll('.button').forEach(button => {

		let getVar = variable => getComputedStyle(button).getPropertyValue(variable);

		button.addEventListener('click', e => {

			if(!button.classList.contains('active')) {

				button.classList.add('active');

				gsap.to(button, {
					keyframes: [{
						'--left-wing-first-x': 50,
						'--left-wing-first-y': 100,
						'--right-wing-second-x': 50,
						'--right-wing-second-y': 100,
						duration: .2,
						onComplete() {
							gsap.set(button, {
								'--left-wing-first-y': 0,
								'--left-wing-second-x': 40,
								'--left-wing-second-y': 100,
								'--left-wing-third-x': 0,
								'--left-wing-third-y': 100,
								'--left-body-third-x': 40,
								'--right-wing-first-x': 50,
								'--right-wing-first-y': 0,
								'--right-wing-second-x': 60,
								'--right-wing-second-y': 100,
								'--right-wing-third-x': 100,
								'--right-wing-third-y': 100,
								'--right-body-third-x': 60
							})
						}
					}, {
						'--left-wing-third-x': 20,
						'--left-wing-third-y': 90,
						'--left-wing-second-y': 90,
						'--left-body-third-y': 90,
						'--right-wing-third-x': 80,
						'--right-wing-third-y': 90,
						'--right-body-third-y': 90,
						'--right-wing-second-y': 90,
						duration: .2
					}, {
						'--rotate': 50,
						'--left-wing-third-y': 95,
						'--left-wing-third-x': 27,
						'--right-body-third-x': 45,
						'--right-wing-second-x': 45,
						'--right-wing-third-x': 60,
						'--right-wing-third-y': 83,
						duration: .25
					}, {
						'--rotate': 55,
						'--plane-x': -8,
						'--plane-y': 24,
						duration: .2
					}, {
						'--rotate': 40,
						'--plane-x': 45,
						'--plane-y': -180,
						'--plane-opacity': 0,
						duration: .3,
						onComplete() {
							setTimeout(() => {
								button.removeAttribute('style');
								gsap.fromTo(button, {
									opacity: 0,
									y: -8
								}, {
									opacity: 1,
									y: 0,
									clearProps: true,
									duration: .3,
									onComplete() {
										button.classList.remove('active');
									}
								})
							}, 2000)
						}
					}]
				})

				gsap.to(button, {
					keyframes: [{
						'--text-opacity': 0,
						'--border-radius': 0,
						'--left-wing-background': getVar('--primary-darkest'),
						'--right-wing-background': getVar('--primary-darkest'),
						duration: .1
					}, {
						'--left-wing-background': getVar('--primary'),
						'--right-wing-background': getVar('--primary'),
						duration: .1
					}, {
						'--left-body-background': getVar('--primary-dark'),
						'--right-body-background': getVar('--primary-darkest'),
						duration: .4
					}, {
						'--success-opacity': 1,
						'--success-scale': 1,
						duration: .25,
						delay: .25
					}]
				})

			}

		})

	});


</script>
</body>
</html>